<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue路由</title>
    <script src="/js/js/vue.js"></script>
    <script src="/js/js/vue-router_3.0.2.js"></script>
    <script src="/js/js/axios.js"></script>
    <style>
        .router-link-active{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-link to="/zhuye">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/dibu">底部</router-link>
        <router-link to="/od">我的</router-link>
        <hr>
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/dibu">底部</a>
        <a href="#/od">我的</a>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script>

        var zhuye={
            template:`<h1>主页内容</h1>`
        }

        var keji={
            template:`<h1>科技板块内容</h1>`
        }
        var od={
            template:`<h1>我的</h1>`
        }
        var dibu={
            template:`<h1>底部内容</h1>`
        }

        var router=new VueRouter({
            routes:[
            {path:'/',redirect:'/zhuye'},//重定向
                {path:'/zhuye',component:zhuye},
                {path:'/keji',component:keji},
                {path:'/od',component:od},
                {path:'/dibu',component:dibu},
            ]
        })
        

        var vm=new Vue({
            el:'#app',
            data:{
                mycon:'zhuye'
            },router//挂在路由
        })
       
    </script>
</body>
</html>